<template>
  <view class="loadingShell">
    <image
      src="https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/b815d3b46f5b479086e8198081561cb81710984521241.png"
    >
    </image>
    <view class="loader" />
  </view>
</template>

<script>
import { receiveXcxOpenId, getWXOpenId } from "@/api/login";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { getRouters } from "@/api/home";
import store from "@/store";
export default {
  data() {
    return {
      openID: "",
      phone_code: "",
      routerList: [],
    };
  },
  onShow() {
    let that = this;

    uni.login({
      provider: "weixin", //使用微信登录
      success: function (loginRes) {
        // 获取用户信息
        getWXOpenId({
          code: loginRes.code,
        }).then((res) => {
          that.openID = res.data; // 获取到openid
          that.$store.commit("SET_OPENID", that.openID);
          receiveXcxOpenId({
            xcxOpenId: that.openID,
          }).then((res) => {
            if (res.data.status == "1") {
              removeToken();
              uni.navigateTo({
                url: "/pages/login",
              });
            } else {
              setToken(res.data.token);
              that.$store.commit("SET_TOKEN", res.data.token);
              that.$store.dispatch("GetInfo").then((res) => {
                uni.reLaunch({
                  url: "/pages/home/index",
                });
                getRouters().then((res) => {
                  if (res.code == 200) {
                    that.remapList(res.data);
                  }
                });
              });
            }
          });
        });
      },
    });
  },
  onLoad() {},
  methods: {
    remapList(list) {
			this.routerList = []
			this.routerList = this.extractTitlesWithoutChildren(list)
			store.commit("SET_ROUTRRLIST", this.routerList)
    },
		// 递归取title
		extractTitlesWithoutChildren(data) {
		  let titles = []
		  data.forEach(item => {
		    if (item.meta && !item.children) {
		      titles.push(item.meta.title)
		    }
		    if (item.children && item.children.length > 0) {
		      titles = titles.concat(this.extractTitlesWithoutChildren(item.children))
		    }
		  })
		  return titles
		},
  },
};
</script>

<style lang="scss">
.loadingShell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  image {
    width: 30%;
    height: 200rpx;
    margin-bottom: 100rpx;
    margin-top: 300rpx;
  }

  /* HTML: <div class="loader"></div> */
  .loader {
    width: 90px;
    height: 14px;
    box-shadow: 0 3px 0 #ccc;
    position: relative;
    clip-path: inset(-40px 0 -5px);
  }

  .loader:before {
    content: "";
    position: absolute;
    inset: auto calc(50% - 17px) 0;
    height: 50px;
    --g: no-repeat linear-gradient(#17409b 0 0);
    background: var(--g), var(--g), var(--g), var(--g);
    background-size: 16px 14px;
    animation: l7-1 2s infinite linear, l7-2 2s infinite linear;
  }

  @keyframes l7-1 {
    0%,
    100% {
      background-position: 0 -50px, 100% -50px;
    }

    17.5% {
      background-position: 0 100%, 100% -50px, 0 -50px, 100% -50px;
    }

    35% {
      background-position: 0 100%, 100% 100%, 0 -50px, 100% -50px;
    }

    52.5% {
      background-position: 0 100%, 100% 100%, 0 calc(100% - 16px), 100% -50px;
    }

    70%,
    98% {
      background-position: 0 100%, 100% 100%, 0 calc(100% - 16px),
        100% calc(100% - 16px);
    }
  }

  @keyframes l7-2 {
    0%,
    70% {
      transform: translate(0);
    }

    100% {
      transform: translate(200%);
    }
  }
}
</style>
